<template>
  <div class="rich-text-editor">
    <!-- 菜单栏（可选） -->
    <el-tiptap-menubar :editor="editor" v-if="showMenu">
      <!-- 默认菜单按钮（加粗、斜体、图片等） -->
      <el-tiptap-button :editor="editor" name="bold" />
      <el-tiptap-button :editor="editor" name="italic" />
      <el-tiptap-button :editor="editor" name="image" />
      <!-- <el-tiptap-button :editor="editor" name="table" /> -->
      <!-- <el-tiptap-button :editor="editor" name="link" /> -->
    </el-tiptap-menubar>

    <!-- 编辑器主体 -->
    <el-tiptap
      v-model:content="content"
      :extensions="extensions"
      placeholder="请输入内容..."
      @update="handleUpdate"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onBeforeUnmount } from 'vue';
import { useEditor } from '@tiptap/vue-3';
import StarterKit from '@tiptap/starter-kit';
import Image from '@tiptap/extension-image';
// import Table from '@tiptap/extension-table';
// import { Table } from '@tiptap/extension-table'
// import Link from '@tiptap/extension-link';
import TextAlign from '@tiptap/extension-text-align';

// Props（可接收初始内容、是否显示菜单等配置）
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  showMenu: {
    type: Boolean,
    default: true,
  },
});

// Emits（用于 v-model 双向绑定）
const emits = defineEmits(['update:modelValue']);

// 编辑器内容（双向绑定）
const content = ref<string>(props.modelValue);

// 编辑器扩展配置
const extensions = [
  StarterKit,
  // Image.configure({
  //   inline: true, // 图片可内联
  //   allowBase64: true, // 允许 Base64 图片
  // }),
  // Table.configure({
  //   resizable: true, // 表格可调整大小
  // }),
  // Link.configure({
  //   openOnClick: false, // 禁止点击链接自动跳转
  // }),
  // TextAlign.configure({
  //   types: ['heading', 'paragraph'], // 对齐方式支持标题和段落
  // }),
];

// 初始化编辑器
const editor = useEditor({
  content: content.value,
  extensions: extensions,
  onUpdate: () => {
    // 内容变化时触发 v-model 更新
    emits('update:modelValue', editor.value?.getHTML() || '');
  },
});

// 监听外部传入的 modelValue 变化
watch(
  () => props.modelValue,
  (newValue) => {
    if (newValue !== editor.value?.getHTML()) {
      editor.value?.commands.setContent(newValue);
    }
  },
);

// 组件销毁时清理编辑器
onBeforeUnmount(() => {
  editor.value?.destroy();
});

// 暴露编辑器实例（供父组件调用方法）
defineExpose({
  editor,
});
</script>

<style scoped>
.rich-text-editor {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
}

/* 覆盖 element-tiptap 默认样式 */
:deep(.ProseMirror) {
  min-height: 200px;
  padding: 10px;
}
</style>